<template>
  <div class="uploadFile">
    <slot></slot>
    <el-upload
      action="#"
      :show-file-list="false"
      :accept="accept"
      :auto-upload="false"
      :on-change="onChange"
      :limit="limit"
      :file-list="fileLis"
      :on-exceed="onExceed"
      :multiple="multiple"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">{{ describe }}</div>
      </template>
    </el-upload>
    <!-- 文件列表 -->
    <div class="demo_image__list">
      <div class="demo-image__preview" v-for="(item, index) in fileLis" :key="index">
        <svg-icon :icon-class="iconClass(item)" style="font-size: 40px; vertical-align: middle; margin-right: 10px; margin-left: 10px"></svg-icon>
        <p style="margin: 0">{{ item.name }}</p>
        <img @click="onDelImg(item)" class="deleteImg" src="@/assets/images/delete.png" alt="" />
      </div>
    </div>
  </div>
</template>
   
<script setup lang='ts'>
const props = defineProps({
  limit: {
    // 最大上传个数
    type: Number,
    default: 0
  },
  describe: {
    // 描述文件
    type: String,
    default() {
      return '';
    }
  },
  accept: {
    // 文件类型
    type: String,
    default: '.ppt,.pptx,.doc,.docx,.xls,.xlsx,.pdf' // 注意！！！ 每个类型之间用英文逗号隔开，不要加空格否则匹配失效
  },
  multiple: {
    // 多选
    type: Boolean,
    default: false
  },
  fileSize: {
    type: Number,
    default: 10 // 默认限制上传文件大小为5M
  }
});
const fileLis = ref<any>([]);
const iconClass = computed(() => {
  return function (item) {
    if (getExtension(item.name) == '.docx' || getExtension(item.name) == '.doc') {
      return 'Word';
    }
    if (getExtension(item.name) == '.xls' || getExtension(item.name) == '.xlsx') {
      return 'Excel';
    }
    if (getExtension(item.name) == '.pdf') {
      return 'Pdf';
    }
    if (getExtension(item.name) == '.ppt' || getExtension(item.name) == '.pptx') {
      return 'PPT';
    }
    if (getExtension(item.name) == '.pdf') {
      return 'Pdf';
    }
    if (getExtension(item.name) == '.png' || getExtension(item.name) == '.jpg' || getExtension(item.name) == '.jpeg') {
      return 'tupian';
    }
  };
});
const getExtension = (filename: any) => {
  let match = filename.match(/\.(\w+)$/);
  if (match && match[1]) {
    return '.' + match[1];
  } else {
    return '';
  }
};
const onChange = (file: any) => {
  let fileType = props.accept.split(',');
  const isLt500k = file.size / 1024 / 1024 < props.fileSize;
  if (!fileType.includes(getExtension(file.name))) {
    onDelImg(file);
    ElMessage.warning(`只能上传${props.accept}格式的文件`);
    return;
  }
  if (!isLt500k) {
    ElMessage.warning(`只能上传${props.fileSize}M以下的文件`);
    return;
  }
  fileLis.value.push(file);
};
const onDelImg = (file: any) => {
  const newArray = fileLis.value.filter((element, index) => element.uid !== file.uid);
  fileLis.value = newArray;
};
const onExceed = (files: any, fileList: any) => {
  ElMessage.warning('');
};
defineExpose({
  fileLis
})
</script>
<style scoped lang='scss'>
.demo_image__list {
  max-height: 400px;
  overflow: auto;
}
.demo-image__preview {
  position: relative;
  margin-right: 10px;
  border: 1px solid #eee;
  box-shadow: rgba(31, 35, 41, 0.03) 0px 4px 16px 4px, rgba(31, 35, 41, 0.02) 0px 4px 8px 0px, rgba(31, 35, 41, 0.02) 0px 2px 4px -4px;
  border-radius: 10px;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  min-width: 300px;
  .deleteImg {
    z-index: 100;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -0px;
    right: 0px;
    cursor: pointer;
  }
}
</style>